<template>
    <div class="AppTopInformationBar">
        <el-breadcrumb separator="/">
        <el-breadcrumb-item to="/home">首页</el-breadcrumb-item>
        <el-breadcrumb-item v-for="item in matched" :key="item.path" :to="{ path: item.path }" v-show="item.meta.title" v-if="matched[0].path!='/home'">
            {{ item.meta.title }}
        </el-breadcrumb-item>
        </el-breadcrumb>
        <div class="info" v-if="userInfo">
            <span>欢迎{{userStore.userInfo.account}}登录 ，</span>
            <span class="quit" @click="logout">退出登录</span>
            <el-avatar :size="30" :src="baseURL+userStore.userInfo.imgUrl" />
        </div>
    </div>
</template>

<script setup>
    import {getRoutesMeta} from '@/utils/getRoutesMeta';
    import { routes } from '@/router/index';
    import {useRoute,useRouter} from 'vue-router'
    import { computed,ref,reactive } from 'vue';
    import { accountInfo } from '../api/account';
    import { useUserStore } from '../store/modules/user';
    import { baseURL } from '@/utils/common.js';
    import dayjs from 'dayjs';
    
    const route = useRoute();
    const router = useRouter();
    const userStore = useUserStore();
    const userInfo = reactive({});
    let metaList = getRoutesMeta(routes);
    const matched = computed(() => {
        let data = route.matched;
        if(data[0].path == data[1].path){
            data = data.slice(1);
        }
        return data;
    })
    accountInfo({id:userStore.userInfo.id}).then(res=>{
        res.accountInfo.ctime = dayjs(res.accountInfo.ctime).format("YYYY-MM-DD");
        let {account, imgUrl} = res.accountInfo;
        userStore.setUserInfo(res.accountInfo)
        userInfo.account = account;
        userInfo.imgUrl = imgUrl;
    })
    const logout = () => {
        userStore.setToken(null)
        userStore.setUserId(null)
        userStore.setUserInfo(null)
        router.push('/login')
    }

</script>

<style lang="scss" scoped>
    .AppTopInformationBar{
        width: 100%;
        height: 50px;
        background-color: #fff;
        padding: 10px 20px;
        box-sizing: border-box;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .info{
            display: flex;
            align-items: center;
            span{
                margin-right: 10px;
            }
        }
    }
    .quit{
        cursor: pointer;
    }
    :deep(.el-breadcrumb__item:last-child>span){
        color: #409eff !important;
        font-weight: bold;
    }
    :deep(.el-breadcrumb__item:first-child>span){
        cursor: pointer !important;
    }
    :deep(.el-breadcrumb__item:first-child>span){
        color: rgb(0, 0, 0) !important;
        font-weight: bold;
    }
    :deep(.el-breadcrumb__item:first-child>span:hover){
        color: #409eff !important;
        font-weight: bold;
    }
</style>